<template>
    <view class="gjl-components">
        <view class="components-inner">
            <view class="img-box">
                <image :src="item.avatarUrl" mode=""></image>
            </view>
            <view class="right-box">
                <view class="name-box">
                    <view class="name">
                        {{item.nickName}}
                    </view>
                    <view class="lable">
                        {{item.vipCardMemberLogName}}:￥{{item.orderMoney}}
                    </view>
                </view>
                <view class="order-num">
                    订单号:{{item.orderNum}}
                </view>
                <view class="bottom-box">
                    <view class="left">
                        佣金：{{item.fundsLogMoney}}元
                    </view>
                    <view class="time">
                        {{item.fundsLogAddTime | format('yy-m-d h:i:s')}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import utils from '@/util/index.js'
    export default {
        filters: {
            format(val,format){
                return utils.format(val,format)
            }
        },
        props:{
            item: {
                type: Object,
                default: function(){
                    return {}
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .components-inner {
        display: flex;
        align-items: flex-start;

        .img-box {
            width: 98rpx;
            height: 98rpx;

            image {
                height: 100%;
                width: 100%;
                border-radius: 50%;
                background: rgba(218, 218, 218, 1);
            }
        }

        .right-box {
            margin-left: 20rpx;
            flex: 1 1 auto;
            .name-box {
                display: flex;
                align-items: flex-end;
                margin-top: 7rpx;
                .name {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                }

                .lable {
                    margin-left: 10rpx;
                    border:1px solid rgba(43,168,252,1);
                    border-radius:4rpx;
                    padding: 4rpx 12rpx;
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(43,168,252,1);
                }
            }
            .order-num{
                margin-top: 8rpx;
                font-size:24rpx;
                font-weight:400;
                color:rgba(153,153,153,1);
            }
            .bottom-box{
                margin-top: 24rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                }
                .time {
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                }
            }
            
        }
    }
</style>
